<script setup>
import { useCommonStore } from '@/store/commonStore'
import { storeToRefs } from 'pinia';
import { reactive, ref, watch } from 'vue';
import { getPersonInfoApi, saveEditApi } from '@/service/person-info'
import { showElMessage } from '@/utils/showTipMessage'
import router from '@/router/router';
import { ElMessageBox } from 'element-plus'

const commonStore = useCommonStore();
const {isShowPersonInfo} = storeToRefs(commonStore);

const form = reactive({
  id: '',
  username: '',
  password: '',
  gender: '',
  name: '',
  roleType: '',
  telephone: '',
  create_time: ''
})

watch(isShowPersonInfo, (newVal) => {
  if (newVal) {
    const roleType = localStorage.getItem('roleType');
    const roleId = localStorage.getItem('id');
    handleRequest(roleId, roleType);
  }
})
    // 根据登录的角色类型和id值，发送网络请求获取该用户的信息
async function handleRequest(id, roleType) {
  const res = await getPersonInfoApi(id, roleType);
  const { data } = res.data;
  const keys = Object.keys(data);
  for (let key of keys) {
    form[key] = data[key];
  }
  console.log(res.data.data);
}

// 修改标识
const readonlyEls = reactive({
  username: true,
  password: true,
  name: true,
  gender: true,
  telephone: true
})

// 能够修改的input的ref对象
const usernameRef = ref(null);
const passwordRef = ref(null);
const nameRef = ref(null);
const genderRef = ref(null);
const telephoneRef = ref(null);

// 开始编辑
const editInfo = (elRef, value) => {   
  readonlyEls[value] = false;
  elRef.input.focus();
}

// 完成编辑
const completeEdit = (elRef, value) => {
  readonlyEls[value] = true;
  elRef.input.blur();
}

// 保存编辑
let isReLogin = false;  // 是否需要重新登录
const saveBtnClick = async() => {
  const res = await saveEditApi(form);
  const { code, updatePassword } = res.data;
  if (!code) {  // 表示数据更新成功
    // 1、关闭个人信息页面
    if (updatePassword) { // 表示密码被修改了
      // 2、提示退出系统重新登录
      handleClose();
      return;
    }
    // 3、提示数据更新成功
    showElMessage('个人信息修改成功~');
    isShowPersonInfo.value = false;
  }
}

const handleClose = () => {
  ElMessageBox({
    title: '温馨提示',
    message: '检测到您的账号密码被修改，请重新登录~~~',
    showCancelButton: false,
    showClose: false,
    confirmButtonText: '确定'
  }).then(() => {
    router.push("/login");
    localStorage.removeItem("token");
    isShowPersonInfo.value = false;
  })
}

</script>

<template>
  <div class="person-info">
    <el-dialog 
      v-model="isShowPersonInfo" 
      title="个人信息"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <el-form :model="form" label-width="100px">
        <el-form-item label="工号：">
          <el-input v-model="form.id" readonly/>
        </el-form-item>
        <el-form-item label="用户类型：">
          <el-input v-model="form.roleType" readonly />
        </el-form-item>
        <el-form-item label="用户名：">
          <el-input 
            v-model="form.username" 
            :readonly="readonlyEls.username" 
            ref="usernameRef"
          />
          <el-link 
            type="default" 
            @click="editInfo(usernameRef, 'username')"
            v-if="readonlyEls.username"
          >修改</el-link>
          <el-link 
            type="success" 
            @click="completeEdit(usernameRef, 'username')"
            v-else
          >完成</el-link>
        </el-form-item>
        <el-form-item label="密码：">
          <el-input 
            v-model="form.password" 
            type="password" 
            show-password 
            :readonly="readonlyEls.password" 
            ref="passwordRef"
          />
          <el-link 
            type="default" 
            @click="editInfo(passwordRef, 'password')"
            v-if="readonlyEls.password"
          >修改</el-link>
          <el-link 
            type="success" 
            @click="completeEdit(passwordRef, 'password')"
            v-else
          >完成</el-link>
        </el-form-item>
        <el-form-item label="姓名：">
          <el-input 
            v-model="form.name" 
            :readonly="readonlyEls.name"  
            ref="nameRef"
          />
          <el-link 
            type="default" 
            @click="editInfo(nameRef, 'name')"
            v-if="readonlyEls.name"
          >修改</el-link>
          <el-link 
            type="success" 
            @click="completeEdit(nameRef, 'name')"
            v-else
          >完成</el-link>
        </el-form-item>
        <el-form-item label="性别：">
          <el-input 
            v-model="form.gender"  
            :readonly="readonlyEls.gender"  
            ref="genderRef"
          />
          <el-link 
            type="default" 
            @click="editInfo(genderRef, 'gender')"
            v-if="readonlyEls.gender"
          >修改</el-link>
          <el-link 
            type="success" 
            @click="completeEdit(genderRef, 'gender')"
            v-else
          >完成</el-link>
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input 
            v-model="form.telephone" 
            :readonly="readonlyEls.telephone"  
            ref="telephoneRef" 
          />
          <el-link 
            type="default" 
            @click="editInfo(telephoneRef, 'telephone')"
            v-if="readonlyEls.telephone"
          >修改</el-link>
          <el-link 
            type="success" 
            @click="completeEdit(telephoneRef, 'telephone')"
            v-else
          >完成</el-link>
        </el-form-item>
        <el-form-item label="注册时间：">
          <el-input v-model="form.create_time" readonly />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="isShowPersonInfo = false">取消</el-button>
          <el-button type="primary" @click="saveBtnClick">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 退出登录对话框 -->
    <el-dialog
      title="温馨提示！"
      width="30%"
      v-model="isReLogin"
      :show-close="false"
    >
      <span>检测到您的账号密码被修改，需要重新进行登录，点击 “确定” 跳转到登录页面~</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="btnClick()">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="less">
.el-input {
  width: 90%;
}
.el-link {
  margin-left: 10px;
}
</style>